/* ========================================================================== أدوات الوصول وإمكانية الاستخدام (Accessibility Widget) — متطلب 3.3 Client-side only: classes are toggled on and persisted in localStorage. RTL/LTR aware. Loaded after main.css so overrides win. ========================================================================== */ /* -------------------------------------------------------------------------- 1) رابط التخطّي إلى المحتوى (Skip to content) -------------------------------------------------------------------------- */ .a11y-skip-link { position: absolute; top: -60px; right: 0; left: 0; margin: 0 auto; width: max-content; max-width: 90%; z-index: 2000; background: #003a72; color: #fff; padding: 10px 22px; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; transition: top 0.2s ease; } .a11y-skip-link:focus { top: 0; color: #fff; outline: 3px solid #ffc107; outline-offset: 2px; } /* -------------------------------------------------------------------------- 2) الزر العائم واللوحة (Floating launcher + panel) -------------------------------------------------------------------------- */ [x-cloak] { display: none !important; } .a11y-launcher { position: fixed; top: 120px; inset-inline-end: 14px; z-index: 1080; /* above Bootstrap sticky-top (1020) */ width: 52px; height: 52px; border: none; border-radius: 50%; background: #003a72; color: #ffc107; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .a11y-launcher:hover, .a11y-launcher:focus { background: #ffc107; color: #003a72; outline: 3px solid #003a72; outline-offset: 2px; } .a11y-panel { position: fixed; top: 120px; inset-inline-end: 76px; z-index: 1081; width: 320px; max-width: calc(100vw - 60px); max-height: 80vh; overflow-y: auto; background: #ffffff; color: #1a1a1a; border: 2px solid #003a72; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); padding: 14px; } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #003a72; padding-bottom: 8px; margin-bottom: 12px; } .a11y-panel__title { font-weight: 700; font-size: 1.05rem; color: #003a72; margin: 0; } .a11y-panel__close { border: none; background: transparent; color: #003a72; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 2px 6px; } .a11y-panel__close:hover, .a11y-panel__close:focus { color: #b00020; outline: 2px solid #003a72; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-grid--full { grid-template-columns: 1fr; margin-top: 8px; } .a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; padding: 8px 6px; border: 2px solid #d0d7e2; border-radius: 8px; background: #f6f8fb; color: #1a1a1a; font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .a11y-btn i { font-size: 1.15rem; color: #003a72; } .a11y-btn:hover, .a11y-btn:focus { border-color: #003a72; background: #eaf0f8; outline: none; } /* حالة التفعيل */ .a11y-btn[aria-pressed="true"] { border-color: #003a72; background: #003a72; color: #fff; } .a11y-btn[aria-pressed="true"] i { color: #ffc107; } .a11y-btn--reset { background: #fbeaea; border-color: #e6b8b8; color: #b00020; } .a11y-btn--reset i { color: #b00020; } .a11y-btn--reset:hover, .a11y-btn--reset:focus { background: #f7dede; border-color: #b00020; } /* عرض مستوى الخط الحالي */ .a11y-font-value { display: inline-block; min-width: 2.5em; font-variant-numeric: tabular-nums; } @media (max-width: 575.98px) { .a11y-launcher { top: auto; bottom: 90px; } .a11y-panel { top: auto; bottom: 90px; inset-inline-end: 76px; } } /* -------------------------------------------------------------------------- 3) مقياس حجم النص (Text scaling) — 3 مستويات فوق الحجم الافتراضي يُطبَّق على عناصر النص الشائعة لتفادي كسر تخطيط الأيقونات/الأزرار. -------------------------------------------------------------------------- */ html.a11y-font-1 { --a11y-font-scale: 1.15; } html.a11y-font-2 { --a11y-font-scale: 1.30; } html.a11y-font-3 { --a11y-font-scale: 1.45; } html[class*="a11y-font-"] #main p, html[class*="a11y-font-"] #main li, html[class*="a11y-font-"] #main a, html[class*="a11y-font-"] #main span, html[class*="a11y-font-"] #main td, html[class*="a11y-font-"] #main th, html[class*="a11y-font-"] #main h1, html[class*="a11y-font-"] #main h2, html[class*="a11y-font-"] #main h3, html[class*="a11y-font-"] #main h4, html[class*="a11y-font-"] #main h5, html[class*="a11y-font-"] #main h6, html[class*="a11y-font-"] .footer p, html[class*="a11y-font-"] .footer a, html[class*="a11y-font-"] .a11y-panel { font-size: calc(1em * var(--a11y-font-scale, 1)) !important; line-height: 1.7 !important; } /* -------------------------------------------------------------------------- 4) وضع التباين العالي (High contrast) طبقة تجاوز مُحدَّدة النطاق فوق ألوان main.css المكتوبة مباشرة. -------------------------------------------------------------------------- */ html.a11y-contrast body { background: #000 !important; background-image: none !important; color: #fff !important; } html.a11y-contrast .main-bg-color, html.a11y-contrast .footer, html.a11y-contrast .offcanvas, html.a11y-contrast .offcanvas-body, html.a11y-contrast .main-nav, html.a11y-contrast #main-nav-id, html.a11y-contrast .list-group-item, html.a11y-contrast .card, html.a11y-contrast .modal-content { background-color: #000 !important; color: #fff !important; } html.a11y-contrast .main-color, html.a11y-contrast .second-color, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6, html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast label { color: #fff !important; } html.a11y-contrast a, html.a11y-contrast .main-nav a, html.a11y-contrast a.text-white { color: #ffec3d !important; text-decoration: underline !important; } html.a11y-contrast img { /* إبقاء الصور مرئية مع حدّ واضح */ outline: 1px solid #fff; } /* اللوحة نفسها تبقى مقروءة في وضع التباين */ html.a11y-contrast .a11y-panel { background: #000 !important; border-color: #ffec3d !important; } html.a11y-contrast .a11y-btn { background: #000 !important; color: #fff !important; border-color: #ffec3d !important; } /* -------------------------------------------------------------------------- 5) التدرّج الرمادي (Grayscale) -------------------------------------------------------------------------- */ html.a11y-grayscale body { filter: grayscale(100%); } /* -------------------------------------------------------------------------- 6) إبراز الروابط (Highlight links) -------------------------------------------------------------------------- */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #ffc107 !important; outline-offset: 1px; background-color: rgba(255, 193, 7, 0.18) !important; border-radius: 3px; } /* -------------------------------------------------------------------------- 7) خط عسر القراءة (Dyslexia-friendly) خط نظامي مقروء + زيادة التباعد بين الأحرف والأسطر والكلمات. -------------------------------------------------------------------------- */ html.a11y-dyslexia #main, html.a11y-dyslexia .footer, html.a11y-dyslexia .offcanvas-body { font-family: "Tahoma", "Verdana", "Segoe UI", sans-serif !important; letter-spacing: 0.06em !important; word-spacing: 0.14em !important; line-height: 2 !important; } /* -------------------------------------------------------------------------- 8) مؤشّر القراءة الصوتية النشطة (Read-aloud active hint) -------------------------------------------------------------------------- */ .a11y-btn.is-speaking { animation: a11yPulse 1s ease-in-out infinite; } @keyframes a11yPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 58, 114, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(0, 58, 114, 0); } }